<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="es" lang="es">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


    <title>El Justiciero</title>

 	 <link rel="stylesheet" type="text/css" href="pbl.css" />
    <link rel="shortcut icon" href="favicon.ico" />
    
    <meta name="keywords" content="El Justiciero, alumando, profesorado, cuatrovientos, notas, competencias claves" />
    <meta name="description" content="Esta es una aplicacion con la cual el instituto cuatrovientos puede evaluar a sus alumnos basandose en las notas tecnicas y las competencias claves" />
	
	<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<style type="text/css">
body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
}
#sliderWrap {
margin: 0 auto;
width: 300px;
}
#slider {

position: absolute;
background-image:url(slider.png);
background-repeat:no-repeat;
background-position: bottom;
width: 300px;
height: 159px;
margin-top: -141px;
}
#slider img {
border: 0;
}
#sliderContent {
margin: 50px 0 0 50px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}
.error {  
       color: #D8000C;  
       background-color: #FFBABA;  
       background-image: url('error.png');
       font-family:Arial, Helvetica, sans-serif;   
       font-size:13px;  
       border: 1px solid;  
       margin: 10px 0px;  
       padding:15px 10px 15px 50px;  
       background-repeat: no-repeat;  
       background-position: 10px center;  
       position:relative;        
}  
</style>
  
	<!--Mensajes de error, con el css de .error-->
	<script type="text/javascript">  
		$(document).ready(function(){  
		setTimeout(function(){ $(".mensajes").fadeOut(800).fadeIn(800).fadeOut(500).fadeIn(500).fadeOut(300);}, 3000);   
		});  
	</script>  
	<!--Hasta aqui-->
  
  
	<script type="text/javascript">
	//<![CDATA[

	//]]>
	</script>
</head>

<body>

<script type="text/javascript">
	$(document).ready(function() {
		$(".topMenuAction").click( function() {
			if ($("#openCloseIdentifier").is(":hidden")) {
				$("#slider").animate({ 
					marginTop: "-141px"
					}, 500 );
				$("#topMenuImage").html('<img src="open.png" alt="open" />');
				$("#openCloseIdentifier").show();
			} else {
				$("#slider").animate({ 
					marginTop: "0px"
					}, 500 );
				$("#topMenuImage").html('<img src="close.png" alt="close" />');
				$("#openCloseIdentifier").hide();
			}
		});  
	});
	</script>
	
	
	
	<div id="sliderWrap">
		<div id="openCloseIdentifier"></div>
		<div id="slider">
			<div id="sliderContent">
				Isn't this nice?
			</div>
			<div id="openCloseWrap">
				<a href="#" class="topMenuAction" id="topMenuImage">
					<img src="open.png" alt="open" />
				</a>
			</div>
		</div>
	</div>
	
	
	
	<!--<div id="header">
		<p></p>
		<a href="#" class="topMenuAction">Click me</a> or the open/close buttons. I will stay behind the slider.
	</div>-->




<div id="degradado">
	<div id="formulario">
	</br>
	<div id="titulo">
		<img src= "logo.png"/>
	<div>
	</br>
	<?php
		if ($_GET["error"] == 1) {
			echo "<div class='error mensajes'>Error al introducir el login o la contraseña</div>  ";
		}
	?>
	<div id="contenido">
		<form name="formu" method="post" action="comprobar.php">
		<!--<fieldset>
			<legend>Inicio de sesión</legend>-->
			</br>
			<table>
			<tr>
				<td colspan="2">
					Para iniciar sesion introducir el login y la contraseña.
				</td>
			</tr>	
			<tr>
				<td>
					<label for="login">Login</label>
				</td>
				<td>
					<input type="text" name="login" id="login"  class="texto"/>
				</td>
			</tr>
			<tr>
				<td>
					<label for="pass">Password</label>
				</td>
				<td>
					<input type="password" name="pass" id="pass"  class="texto"/>
				</td>
			</tr>

			<tr>
				<td colspan="2">
					<input type="submit" name="enviar" id="enviar" value="Entrar" />
				</td>

			</tr>
			</table>
		<!--</fieldset>-->
		</form>
	</div>
</div>
</div>
</body>
</html>